<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <!--引入CSS-->
    <link rel="stylesheet" type="text/css" href="/static/webuploader/webuploader.css">
    <link rel="stylesheet" type="text/css" href="/static/webuploader/style.css" />
    <link rel="stylesheet" type="text/css" href="/static/layui/css/modules/layer/default/layer.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/font-awesome.min.css" />
    <%--使用webuploader要先引入jquery.js--%>
    <script src="/static/js/jquery.min.js"></script>
    <!--引入JS-->
    <script type="text/javascript" src="/static/webuploader/webuploader.js"></script>
    <%--<script type="text/javascript" src="/static/webuploader/upload.js"></script>--%>

    <script src="/static/layui/layui.js"></script>
    <script src="/static/layui/lay/modules/layer.js"></script>


</head>

<body class="gray-bg">
<form class="layui-form" action="">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header layuiadmin-card-header-auto">
                <p>您可以尝试文件拖拽，使用QQ截屏工具，然后激活窗口后粘贴，或者点击添加图片按钮，来体验此demo.</p>
            </div>
            <div class="layui-card-body">
                <div class="page-container">
                    <%--删除图片的地址--%>
                    <input type="hidden" id="del" name="del" >
                    <%--展示的图片地址--%>
                    <input type="hidden" id="hid" value="/upload/8ac8b3e959c341a79f0e26289e168681.jpg,/upload/f9e0b6d8fa664590b27464cf08a7af37.jpg">
                    <%--表单提交的图片地址--%>
                    <input type="hidden" name="photo" id="photo" value="/upload/8ac8b3e959c341a79f0e26289e168681.jpg,/upload/f9e0b6d8fa664590b27464cf08a7af37.jpg">
                    <div id="uploader" class="wu-example">
                        <div class="queueList">
                            <div id="dndArea" class="placeholder">
                                <div id="filePicker"></div>
                                <p>或将照片拖到这里，单次最多可选300张</p>
                            </div>
                        </div>
                        <div class="statusBar" style="display:none;">
                            <div class="layui-progress layui-progress-big active" lay-showpercent="true">
                                <div class="layui-progress-bar layui-bg-blue" lay-percent="0%">
                                </div>
                            </div>
                            <div class="info"></div>
                            <div class="btns">
                                <div id="filePicker2"></div>
                                <div class="uploadBtn">Upload</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">Submit</button>
                    <button type="reset" class="layui-btn layui-btn-primary">Reset</button>
                </div>
            </div>
        </div>
    </div>
</form>
<script type="text/javascript" src="/static/webuploader/webuploader_update.js"></script>

<script>
    layui.use(['form','layer'], function(){

        var form = layui.form,
            layer = layui.layer;

        form.on('submit(formDemo)', function(data){
            // var photo = $("#photo").val();

            var photo=data.field.photo;
            alert(photo);
            if (photo == '' ){
                layer.msg("Please upload at least one picture",{time:1000,icon:2});
                return false;
            }
            // $.ajax({
            //     url : '',
            //     type : 'post',
            //     dataType : 'json',
            //     data : data.field,
            //     success : function (data) {
            //         if (data.code == 200){
            //             layer.msg(data.msg,{icon: 1, time: 500},function (index) {
            //                 layer.close(index);
            //                 window.parent.location.reload();
            //             });
            //         }else{
            //             layer.msg(data.msg,{icon: 2, time: 1000});
            //         }
            //     }
            // })
            return false;
        });

    })

</script>
</body>

</html>